<template>
  <div id="app" class="ordering">
    <!-- 导航栏 -->
    <nav class="bg-gray-900 text-white p-4">
      <div class="container mx-auto flex justify-between items-center">
        <h1 class="text-2xl font-bold">扁鹊</h1>
      </div>
    </nav>

    <!-- 英雄部分 -->
    <section class="bg-cover bg-center py-32" style="background-image: url('https://picsum.photos/1920/1080');">
      <div class="container mx-auto text-center text-white">
        <h2 class="text-4xl font-bold mb-4">扁鹊 - 古代医学的先驱</h2>
        <p class="text-lg mb-8">他以精湛的医术和高尚的医德闻名于世。</p>
        <router-link to="/works" class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded">了解更多</router-link>
      </div>
    </section>

    <!-- 生平介绍 -->
    <section class="container mx-auto py-16">
      <h2 class="text-3xl font-bold text-center mb-8">生平简介</h2>
      <div class="flex flex-wrap justify-center gap-8">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white shadow-md rounded p-6">
            <h3 class="text-xl font-bold mb-2">早年经历</h3>
            <p>扁鹊年轻时曾在一家客馆中工作，得到长桑君的传授，学会了高超的医术。</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white shadow-md rounded p-6">
            <h3 class="text-xl font-bold mb-2">行医生涯</h3>
            <p>他周游列国，为百姓治病，擅长各科，尤其在脉诊和针灸方面有很高的造诣。</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="bg-white shadow-md rounded p-6">
            <h3 class="text-xl font-bold mb-2">悲惨结局</h3>
            <p>由于他的医术高超，遭到了一些人的嫉妒，最终被杀害。</p>
          </div>
        </div>
      </div>
    </section>

    <!-- 成就展示 -->
    <section class="bg-gray-100 py-16">
      <div class="container mx-auto text-center">
        <h2 class="text-3xl font-bold mb-8">主要成就</h2>
        <div class="flex flex-wrap justify-center gap-8">
          <div class="w-full md:w-1/2 lg:w-1/3 p-4">
            <div class="bg-white shadow-md rounded p-6">
              <i class="fa-solid fa-stethoscope text-yellow-500 text-4xl mb-4"></i>
              <h3 class="text-xl font-bold mb-2">脉诊法</h3>
              <p>扁鹊是中国古代脉诊法的创始人，他通过按触病人脉搏来诊断疾病。</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/3 p-4">
            <div class="bg-white shadow-md rounded p-6">
              <i class="fa-solid fa-syringe text-yellow-500 text-4xl mb-4"></i>
              <h3 class="text-xl font-bold mb-2">针灸术</h3>
              <p>他熟练运用针灸技术治疗各种疾病，为针灸学的发展做出了重要贡献。</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 lg:w-1/3 p-4">
            <div class="bg-white shadow-md rounded p-6">
              <i class="fa-solid fa-book-medical text-yellow-500 text-4xl mb-4"></i>
              <h3 class="text-xl font-bold mb-2">医学著作</h3>
              <p>相传他著有《扁鹊内经》《扁鹊外经》等医学著作。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 数据可视化部分 -->
    <section class="bg-white py-16">
      <div class="container mx-auto text-center">
        <h2 class="text-3xl font-bold mb-8">扁鹊主要成就影响力对比</h2>
        <p class="mb-4">x 轴：扁鹊的主要成就类型</p>
        <p class="mb-4">y 轴：影响力数值（相对值）</p>
        <div id="echarts-container" class="w-full h-64"></div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-900 text-white py-8">
      <div class="container mx-auto text-center">
        <p>&copy; 关于扁鹊的网页</p>
      </div>
    </footer>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import echarts from '@/assets/echarts.min.js';

export default defineComponent({
  data() {
    return {};
  },
  mounted() {
    this.initECharts();
  },
  methods: {
    initECharts() {
      const myChart = echarts.init(document.getElementById('echarts-container'));
      const option = {
        xAxis: {
          type: 'category',
          data: ['脉诊法', '针灸术', '医学著作'],
          axisTick: {
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLabel: {
            fontSize: 14,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#f0f0f0'
            }
          },
          axisLabel: {
            fontSize: 14,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        series: [
          {
            data: [80, 70, 60],
            type: 'bar',
            barWidth: '40%',
            itemStyle: {
              borderRadius: 5,
              shadowColor: 'rgba(0, 0, 0, 0.3)',
              shadowBlur: 5,
              shadowOffsetX: 2,
              shadowOffsetY: 2
            },
            label: {
              show: true,
              position: 'top',
              fontSize: 14,
              fontWeight: 'bold',
              color: '#333'
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          textStyle: {
            color: '#fff'
          }
        }
      };
      myChart.setOption(option);
    }
  }
});
</script>

<style scoped>
#app .container {
  max-width: 1200px;
  margin: 0 auto;
}
</style>